<template>
	<view class="page">
		<!-- 整个主体部分（背景是图片）-strat -->
		<view class="uni-form-contentimage topic">
			<!-- 导航栏-start-->
			<view class="uni-form-nav">
				<view class="nav-content" v-for="(item,index) in NavigationBar" :key=index @click="redirect(item.url)">
					<image :src="item.img" mode="widthFix" class="nav-image">
					</image>
					<view class="nav-text">
						{{item.name}}
					</view>
				</view>
			</view>
			<!-- 导航栏-end -->

			<!-- 导航栏上面的插件-start -->
			<view class="uni-form-addon">
				<!-- 未登录-start -->
				<view class="addon-content" @click="addonChange()" v-if="addon===true">
					<view class="addon-text">
						登录查看账户资产和投资信息
					</view>
					<view class="addon-image">
						<image src="../../static/home_icon/home_icon_right.png" mode="/"></image>
					</view>
				</view>
				<!-- 未登录-end -->
				<!-- 已登录-start -->
				<view class="addon-content" @click="addonChange()" v-else>
					<view class="addon-texts">
						<view class="addon-texts-one">
							<view class="">
								{{userinfo.total_assets}}
							</view>
							<view class="">
								总资产(元)
							</view>
						</view>
						<view class="addon-texts-one texts-two">
							<view class="">
								{{userinfo.total_market_value}}
							</view>
							<view class="">
								持仓市值
							</view>
						</view>
					</view>
					<view class="addon-image">
						<image src="../../static/home_icon/home_icon_right.png" mode="/"></image>
					</view>
				</view>
				<!-- 已登录-end -->
			</view>
			<!-- 导航栏上面的插件-end -->

			<!-- 主体-包含轮播图等-start -->
			<view class="uni-form-main">
				<!-- 轮播图-start -->
				<view class="main-banner">
					<view class="uni-margin-wrap">
						<swiper class="main-swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
							:interval="interval" :duration="duration">
							<swiper-item v-for="(mainbanner,index) in mainBanner">
								<image :src="mainbanner.image" mode="scaleToFill" class="main-swiper"></image>
							</swiper-item>
						</swiper>
					</view>
				</view>
				<!-- 轮播图-end -->

				
				<!-- 主体股票信息栏-start -->
				<view class="main-message">
					<view class="message-content">
						<!-- 纵向滑动效果-start -->
						<view class="message-wrap" @click="messagechange()">
							<swiper class="message-swiper disabled" circular :autoplay="autoplay" :duration="duration"
								vertical="ture">
								<swiper-item v-for="(item,index) in stockExponent">
									<view class="message-swiper-item uni-bg-red"
										v-if="parseFloat(item.chg)< 0 ? messagecolor='warpgreen' : messagecolor='warpred'">
										<view>{{item.name}}</view>
										<view class="swiper-style"
											v-if="parseFloat(item.chg)< 0 ? warpcolor='iconfont icon-xiangxiajiantou warpgreen' : warpcolor='iconfont icon-xiangshangjiantou warpred'">
											<view :class="messagecolor">{{item.price}}</view>
											<view :class="messagecolor">{{item.turnover}}</view>
											<view :class="messagecolor">{{item.chg}}</view>
											<text :class="warpcolor"></text>
										</view>
									</view>
								</swiper-item>
							</swiper>
						</view>
						<!-- 纵向滑动效果-end -->
						<view class="message-text"
							v-if="parseFloat(randStock[3]) < 0 ? colortext='warpgreen' : colortext='warpred'">
							<view>{{randStock[1]}}</view>
							<view v-if="parseFloat(randStock[3]) < 0 ? text='下降' : text='上涨'">{{text}}<text
									:class="colortext">{{randStock[3]}}</text></view>
						</view>
					</view>
				</view>
				<!-- 主体股票信息栏-end -->
			</view>
			<!-- 主体-包含轮播图等-end -->
		</view>
		<!-- 整个主体部分（背景是图片-end -->

		<!-- 文字滑动效果-start -->
		<view class="main-slide">
			<view class="iconfont icon-yangshengqi slide-image"></view>
			<view class="slide-wrap">
				<view class="slide-wrap-text" @click="warpchange()">
					{{notice}}
				</view>
			</view>
		</view>
		<!-- 文字滑动效果end -->
		<!-- 三步投资-start -->
		<view class="uni-form-image" @click="imagechange()">
			<image src="../../static/home_icon/home_tzimg.png" mode="widthFix"></image>
		</view>
		<!-- 三步投资-end -->

		<!-- 今日热点-start -->
		<view class="uni-form-hotspot">
			<view class="hotspot-title">
				<view class="hotspot-title-text">
					今日热点
				</view>
				<view class="hotspot-title-image">
					行情中心<text>></text>
				</view>
			</view>
			<view class="hotspot-content" @click="hotspotchange()">
				<view class="hotspot-content-top" v-for="(hotspottop,index) in hotspotTop">
					<view class="">
						{{hotspottop.name}}
					</view>
					<view :class="parseFloat(hotspottop.num)<0?'warpgreen':'warpred'">
						{{hotspottop.zf + '%'}}
					</view>
					<view class="top-color">
						热搜TOP{{hotspottop.num}}
					</view>
				</view>
			</view>
		</view>
		<!-- 今日热点-end -->

		<!-- 热点资讯-start -->
		<view class="uni-form-inform">
			<view class="inform-title">
				<view class="inform-title-text">
					热点资讯
				</view>
				<view class="inform-title-image">
					查看更多<text>></text>
				</view>
			</view>
			<view class="inform-content">
				<view class="inform-border" v-for="(informborder,index) in informBorder"
					@click="informchange(informborder.url)">
					<view class="infom-one">
						<view class="inform-content-text">
							<view class="inform-content-title">
								{{informborder.title}}
							</view>
							<view class="inform-words">
								{{informborder.description}}
							</view>
						</view>
						<view class="inform-time">
							{{formatDate(informborder.ctime)}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 热点资讯-end -->

		<!-- 弹窗效果-start -->
		<Popup :Showhide="addon"></Popup>
		<!-- 弹窗效果-end -->
	</view>
</template>

<script>
	import request from "/api/request.js"
	import { redirectTo } from "/utils/util.js"
	import Popup from "@/components/Popup/Popup.vue"
	export default {
		data() {
			return {
				NavigationBar: [
					{
						img: "../../static/home_icon/page_cicon02.png",
						name: "资产",
						url:'/pages/market/market'
					},
					{
						img: "../../static/home_icon/page_cicon03.png",
						name: "选股",
						url:'/pages/market/market'
					},
					{
						img: "../../static/home_icon/page_cicon04.png",
						name: "选购",
						url:'/pages/market/market'
					},
					{
						img: "../../static/home_icon/page_cicon05.png",
						name: "行情",
						url:'/pages/market/market'
					}
				],
				userinfo:{
					total_assets:0.00,
					total_market_value:0.00
				},
				mainBanner: [],
				// 证券指数
				stockExponent: [],
				randStock: {},
				notice:`公告：为了给您带来更优质的服务体验，平台系统现已升级完成，
					本次升级给您带来不便，我们深表歉意，同时感谢您的理解及配合
					（温馨提醒，为您提供汇款的托管账户已更新，之前汇款账户已全部结算清算完成并下架，
					请勿汇款至之前托管账户现账户只能用于您提交的本次汇款，超时请联系在线客服）`,
				addon: true,
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				hotspotTop: [],
				informBorder: []
			}
		},
		components: {
			Popup
		},
		onLoad() {
			// 生命周期函数，先判断用户是否登录
			// let token = uni.getStorageSync('token')
			// if (token) {
			// 	this.addon = false
			// } else {
			// 	this.addon = true
			// }

		
			// 轮播图的请求-start
			request.get('/api/index/banner')
				.then((res) => {
					this.mainBanner = res.data
				})
				.catch((error) => {
					console.log(error);
				})
			// 股票指数
			request.get('/api/index/stockExponent')
				.then((res) => {
					this.stockExponent = res.data.exponent
					this.randStock = res.data.randStock
				})
				.catch((error) => {
					console.log(error);
				})
				
			// 热点资讯-start
			request.get('/api/index/getinformation')
				.then((res) => {
					console.log(res);
					this.informBorder = res.data
				})
				.catch((error) => {
					console.log(error);
				})
			// 热点资讯-end

			// 使用WebSocket协议-与后端进行连接-start
			uni.connectSocket({
				url: 'ws://182.162.18.125:8282'
			});
			uni.onSocketOpen(function(res) {
				console.log('WebSocket连接已打开！');
				const data = {
					type: 'index_hots'
				};
				const jsonData = JSON.stringify(data);

				uni.sendSocketMessage({
					data: jsonData,
					success: function() {
						console.log('信息发送成功');
					},
					fail: function() {
						console.log('信息发送失败');
					}
				});
			});


			// 提高一下this的作用域
			let me = this
			uni.onSocketMessage(function(res) {
				let type = JSON.parse(res.data)
				console.log(type);
				if (typeof type === "object" && type != null) {
					if (type.type !== 'ping') {
						me.hotspotTop = JSON.parse(res.data)
					}
				} else {
					console.log("数据错误");
				}
			});
			uni.onSocketError(function(res) {
				console.log('WebSocket连接打开失败，请检查！');
			});
			uni.onSocketClose(function(res) {
				console.log('WebSocket 已关闭！');
			});
			// webscokt协议-end

		},
		// 输入框点击跳转事件-start
		onNavigationBarSearchInputClicked() {
			uni.navigateTo({
				url: "/pages/sousou/sousou"
			})
		},

		// 输入框点击跳转事件-end
		methods: {
			// 跳转
			redirect(url){
				uni.navigateTo({
					url: url
				});
			},
			// 导航栏判断用户登录事件-start
			changenav(e) {
				let index = e
				if (this.addon == true) {
					if (index == 3) {
						uni.navigateTo({
							url: `../market/market?addon=${this.addon}`
						})
					} else {
						uni.navigateTo({
							url: "../login/login"
						})
					}
				} else if (this.addon == false && index == 0) {
					uni.switchTab({
						url: "../asset/asset"
					})
				} else if (this.addon == false && index == 1) {
					uni.navigateTo({
						url: "../sousou/sousou"
					})
				} else if (this.addon == false && index == 2) {
					uni.switchTab({
						url: "../trade/trade"
					})
				} else if (this.addon == false && index == 3) {
					uni.navigateTo({
						url: `../market/market?addon=${this.addon}`
					})
				}
			},
			// 导航栏判断用户登录事件-end

			// 导航栏上面的插件-start
			addonChange(e) {
				// 登录了点击跳转到资产页面
				if (this.addon == true) {
					uni.navigateTo({
						url: "../login/login"
					})
				} else {
					uni.switchTab({
						url: "/pages/asset/asset"
					})
				}

			},
			// 导航栏上面的插件-end

			// 主体导航栏部分-start

			// mainnavchange(e) {
			// 	if (this.addon == true) {
			// 		uni.navigateTo({
			// 			url: "../login/login"
			// 		})
			// 	} else if (this.addon == false && e == 0) {
			// 		uni.navigateTo({
			// 			url: "../wangneng/wangneng"
			// 		})
			// 	} else if (this.addon == false && e == 1) {
			// 		uni.switchTab({
			// 			url: "/pages/trade/trade"
			// 		})
			// 	} else if (this.addon == false && e == 2) {
			// 		uni.navigateTo({
			// 			url: "../wangneng/wangneng"
			// 		})
			// 	}
			// },

			mainnavchange(e) {
				console.log(e);
				if (this.addon == true) {
					uni.navigateTo({
						url: "../login/login"
					})
				} else if (this.addon == false && e == 0) {
					uni.navigateTo({
						url: "../wangneng/wangneng"
					})
				} else if (this.addon == false && e == 1) {
					uni.navigateTo({
						url: "../wangneng/wangneng"
					})
				} else if (this.addon == false && e == 2) {
					uni.switchTab({
						url: "/pages/trade/trade"
					})
				} else if (this.addon == false && e == 3) {
					uni.navigateTo({
						url: "../wangneng/wangneng"
					})
				}
			},

			// 主体导航栏部分-end

			// 纵向滑动效果-start
			messagechange() {
				// 这个不需要考虑登录状态
				uni.navigateTo({
					url: "../wangneng/wangneng",
					// 需要转值过去
				})
			},
			// 纵向滑动效果-end

			// 文字滑动效果-start
			warpchange() {
				// 点击跳转到公司公告部分
				uni.navigateTo({
					url: "../announcement/announcement"
				})
			},
			// 文字滑动效果-end


			// 中间的图片-start
			imagechange() {
				// 登录了调整到我的页面，未登录跳转到注册页面
				if (this.addon == false) {
					uni.switchTab({
						url: "/pages/mine/mine"
					})
				} else {
					uni.navigateTo({
						url: "/pages/register/register"
					})
				}
			},
			// 中间的图片-end

			// 今日热点-start
			hotspotchange() {
				uni.navigateTo({
					url: "/pages/wangneng/wangneng"
				})
			},
			// 今日热点-end

			// 热点资讯-start
			informchange(url) {
				let informurl = url
				uni.navigateTo({
					url: `/pages/information/information?url=${informurl}`
				})
			},
			// 热点资讯-end
			// vue3的过滤器用法-start
			formatDate(value) {
				var time = new Date(value);
				var year = time.getFullYear(); // 年
				var month = (time.getMonth() + 1) < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1; // 月
				var day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate(); // 日
				var hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours(); // 时
				var minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes(); // 分
				var seconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds(); // 秒
				return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;

			}
			// vue3的过滤器用法-end
		}
	}
</script>

<style lang="scss">
	@import url("index.css");
	@import url("@/static/iconfont/iconfont.css");
</style>